@import '../../style/color_theme.sass'

.product_wrapper
    width: 100%
    height: 100%
    padding-bottom: 30px
.details_container
    margin: 14px 40px 0

.product_info_wrapper
    padding: 20px 20px
    margin-bottom: 20px
    background: $color_ffff
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)


.details_container
    
    .product_info_name
        padding-bottom: 20px
        background: url('../../Image/line_2.png') repeat-x -11px bottom

    
    .product_info_price
        padding: 20px 0 10px
    
.middle_line
    background: url('../../Image/line_1.png') repeat-y 0 -10px
    padding: 0 10px
    min-width: 40%
    max-width: 40%
    box-sizing: border-box

.product_name
    position: relative
    float: left
    font-size: 24px
    color: $color_6666
    width: 260px
    white-space: nowrap
    text-overflow: ellipsis

    &::after
        position: absolute
        content: attr(data-status)
        font-size: 13px
        color: $color_fd69
        margin-left: 10px
        width: 120px

.info_top
    float: left
    width: 100%
    .product_cat
        float: right

        em
            font-style: normal
.info_bottom
    em
        font-size: 13px
        padding-right: 1px

.product_info_left
    padding-right: 20px
    min-width: 33%
    box-sizing: border-box

.info_tags
    float: left
    
    span
        margin-bottom: 6px
        background: $color_ff69
        color: $color_ffff
        border-color: $color_ff69
    .border_tags
        background: $color_ffff
        color: $color_ff69

.product_info_tags
    width: 290px

.info_stars
    float: right
    width: 165px
    text-align: right
    padding-left: 10px
    color: $color_ff69
    span
        position: relative

        &:after
            position: absolute
            width: 98%
            content: ''
            background: $color_ff69
            height: 1px
            bottom: -1px
            left: -4px


.middle_infos
    li
        line-height: 1.6
        padding: 4px 0
        &::after
            display: block
            content: ''
            clear: both

        div
            float: left
            width: 50%
            em
                font-style: normal
            span
                display: inline-block
                width: 100px
                text-align: right
                padding-right: 10px
            &:last-child
                float: right

.right_buttons
    padding-left: 20px
    max-width: 22%
    min-width: 10%
    box-sizing: border-box
    button
        margin-right: 20px

.info_bottom_list
    padding-top: 30px
    li
        float: left
        width: 50%
        &:first-child
            span
                font-size: 20px
                width: 60px
                display: inline-block
            strong
                font-size: 34px
                font-weight: normal 
                color: $color_ff69
                padding-left: 20px
        
        &:last-child
            padding-top: 24px
            span
                width: 120px
                display: inline-block
                text-align: right
                padding-right: 10px
            em
                font-style: normal
                font-size: 14px

.info_items
    padding-top: 16px
    li
        float: left
        width: 45%
        &:first-child
            padding-left: 70px
            width: 55%
            strong
                font-weight: normal
        &:last-child
            span
                width: 120px
                display: inline-block
                text-align: right
                padding-right: 10px
            em
                font-style: normal
                font-size: 14px

.bottom_middle_items
    dt
        text-align: center
        font-size: 18px
        padding-bottom: 20px


    dd
        span
            display: block
            color: $color_ff69
            font-size: 18px
        
        strong
            display: block
            font-weight: normal
            padding-top: 20px


.charts_item_bg
    background: $color_ffff
    padding: 20px 20px

.history_list
    padding-right: 10px
    box-sizing: border-box
    width: 50%
.ranking_list
    width: 50%
    box-sizing: border-box
    padding-left: 10px

.none_bg_wrapper
    background: $color_ffff
    padding: 20px 20px

.charts_correlation
    width: 50%

.table_correlation
    width: 50%
    height: 100%

.holder_wrapper
    background: $color_ffff
    padding: 20px
    .holder_btn_dec
        width: 160px
        margin: 0px auto 20px
        color: $color_ff69
        border: 1px solid $color_ff69
        text-align: center
        font-size: 18px
        box-sizing: border-box
        line-height: 40px

        span
            font-size: 24px
            padding-right: 16px
            margin-left: -10px
    .holder_btn_dec_large
        max-width: 290px
        margin: 0px auto 20px
        color: $color_ff69
        border: 1px solid $color_ff69
        text-align: center
        font-size: 18px
        box-sizing: border-box
        line-height: 40px
        span
            font-size: 24px
            padding-right: 16px
            margin-left: -2px

.bonds_right
    padding-left: 10px
    width: 50%
    box-sizing: border-box

.bonds_left
    padding-right: 10px
    width: 50%
    box-sizing: border-box
    
.year_report
    border: 1px solid $color_bfbf
    margin-top: 20px
    padding: 10px 10px

.title_header_tit
    font-weight: normal
    color: $color_6666
    font-size: 18px

.table_content
    width: 100%

    &:first-child
        padding-top: 10px

.table_charts_content
    width: 100%
    display: flex

    dl
        box-sizing: border-box
        flex: 1
        border: 1px solid $color_bfbf
        border-right: 0 none
        overflow: hidden
        
        &:last-child
            border-right: 1px solid $color_bfbf

        &:nth-child(2)
            overflow: inherit
            
        dt
            height: 60px
            border-bottom: 1px solid $color_bfbf
            line-height: 60px
            text-align: center
            font-size: 16px
        dd
            height: 900px
            position: relative
            margin: 0
            padding: 8px 0
            div
                position: absolute
                top: 0
                height: 101%
                left: -104%
                div
                    left: 0


.advisor_title_company
    width: 100%
    padding-bottom: 20px
    padding-top: 10px

    li
        float: left
        padding-right: 30px
        &:last-child
            padding-right: 0
        span
            display: inline-block

        em
            font-style: normal

.display_flex_align_center
    display: flex
    align-items: center

.manager_introduce
    font-size: 14px 
    padding-top: 10px
    color: $color_6666
    line-height: 1.8
    text-align: justify

.infos_table_padding
    padding: 10px 10px

.fund_nav_tit
    font-size: 16px
    font-weight: 500

.split_nav_left
    width: 50%

.split_nav_right
    width: 50%

.fund_nav_wrapper
    padding-left: 16px
    max-width: 26%
    min-width: 10%
    box-sizing: border-box

.fund_rate_value
    font-style: normal
    font-size: 18px
    color: $color_ff69

.product_info_left_bottom
    padding-right: 20px
    box-sizing: border-box

.middle_line_bottom
    background: url('../../Image/line_1.png') repeat-y 0 -10px
    padding: 0 20px
    box-sizing: border-box
